@import "../../variable.less";
@bg-a : #ccc;
@bg-b : transparent;
.@{prefix}{
  &-color-select {
    display: flex;
    flex-flow: column;
    width: 300px;
    &-panel {
      width: 100%;
      height: 180px;
      box-sizing: border-box;
      display: flex;
      margin-bottom: 12px;
      &-saturation {
        width: 100%;
        height: 100%;
        position: relative;
      }
      &-white {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
      }
      &-black {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to top , #000 , rgba(255,255,255,0));
      }
    }
    &-pointer {
      position: absolute;
      z-index: 1000;
      &-point {
        width: 4px;
        height: 4px;
        min-height: 4px;
        min-width: 4px;
        border-radius: 50%;
        box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px #0000004d, 0 0 1px 2px #0006;
        transform: translate(-2px , -2px);
      }
    }
    &-hue {
      background-color: #fff;
      margin-bottom: 10px;
      &-slider {
        height: 12px;
        width: 100%;
        position: relative;
        cursor: pointer;
        background-image: linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);
        &-thumb {
          width: 4px;
          height: 100%;
          background-color: #fff;
          border-radius: 1px;
          border: 1px solid #ddd;
          position: absolute;
          top: 0;
          left: 0;
          cursor: pointer;
        }
      }
    }
    &-alpha {
      background-color: #fff;
      margin-bottom: 10px;
      &-slider {
        height: 12px;
        width: 100%;
        position: relative;
        background-image: linear-gradient(45deg,@bg-a 25%,@bg-b 25%),linear-gradient(135deg,@bg-a 25%,@bg-b 25%),linear-gradient(45deg,@bg-b 75%,@bg-a 75%),linear-gradient(135deg,@bg-b 75%,@bg-a 75%);
        background-size: 12px 12px;
        background-position: 0 0,6px 0,6px -6px,0 6px;
        &-bar {
          height: 100%;
        }
        &-thumb {
          width: 4px;
          height: 100%;
          background-color: #fff;
          border-radius: 1px;
          border: 1px solid #ddd;
          position: absolute;
          left: 0;
          top: 0;
          cursor: pointer;
        }
      }
    }
    &-colors {
      display: grid;
      grid-template-columns: repeat(auto-fill , 20px);
      grid-row-gap: 8px;
      grid-column-gap: 8px;
      margin-bottom: 10px;
      &-preset {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        display: flex;
        cursor: pointer;
        border: 1px solid transparent;
      }
    }
    &-input {
      display: flex;
      align-items: center;
      font-size: var(--font-size-base);
      &-btn {
        margin-left: 10px;
      }
    }
  }
}